Help

Image Maps-Links to Images

Image maps are images that, when clicked on, perform similarly to hyperlinked text. The difference is that you can map URLs to certain portions of the image. For example, you could create an image map with graphical symbols for parts of your business (support, information, products, etc.). When the user clicks on these graphical images, the user is taken to the pages on that particular subject. By using the NaviServer product along with NaviPress, you can create quick and easy image maps.

When the user clicks somewhere on the map image, the browser sends the coordinates of the click to the Web server. In the case of NaviPress's image maps, the Web server must be a NaviServer. The server then processes the coordinates and determines which "hot spot" the mouse was near when it was clicked and returns the URL that is mapped to the hot spot. If the spot the user clicked on is not mapped, then the default URL is returned instead. The browser then retrieves the page designated by the URL.

Make an image map:

1. Select an image in your document that you would like to place hot spots on. Choose the menu Element->Image Map to get the NaviPress - Image Map dialog.
   • You will probably want to re-size the Image Map dialog to be able to see the entire image. You can do this just as you would normally for any window on your computer.

Image Map dialog

The following are the items available in the Image Map dialog:

Map Name           This is the name of your map file,     
                   which is different from the name of    
                   the image. Map names end with .nvm,    
                   which replaces the ending of your      
                   image file (e.g., .gif). You can       
                   rename it if you wish.                 

Create Rectangle   The image you have just selected is    
                   located in this box. This is the work  
                   area for creating your map hot spots   
                   with the rectangle tool. To select a   
                   hot spot, drag a small rectangle in    
                   the desired area of the image.         

Rectangle List     This is a menu list of your map hot    
                   spots. The coordinates of the          
                   rectangle are listed along with the    
                   URL of the item.                       

Location           This text area is where you type the   
                   URL you want your rectangle to map     
                   to.                                    

Rectangle in       When the Image Map dialog opens,     
Pixels             the four pixel boxes have zeros.       
                   After you select a rectangle in the    
                   Create Rectangle box, the pixel boxes  
                   show the coordinates of the            
                   rectangle. You can also make           
                   rectangle selections by entering the   
                   exact pixel coordinates.               

Selection Type:    Choose Rectangle to select rectangle   
Rectangle or       hot spots. Choose Default to select    
Default            the default location (the URL that     
                   appears if no selection is clicked on  
                   the image map).                        

OK                 Closes the Image Map dialog box .    

Cancel             Closes the Image Map dialog box      
                   without making the changes.            

Add                Adds a new selection or hot spot to    
                   the image map.                         

Change             Allows you to edit any URL selection   
                   you have made.                         

Remove             Removes the rectangle or hot spot      
                   selected.                              

Up                 Moves the rectangle or hot spot        
                   selected up one line.                  

Down               Moves therectangle or hot spot         
                   selected down one line.                

Browse             Allows you to browse your local files  
                   or any networked NaviServer for        
                   choosing map links.                    

Help               Provides an on-line Image Map Help     
                   Page.                                  

Example: insert a specific image map:

1. Set the default location by clicking the Default button under Selection Type.
   
   If nothing is chosen for default, clicking outside all hot spots has no effect.

2. Enter an URL in the Location field (e.g., http://www.navisoft.com/) for the default selection.
3. Click the Add button. The default location has now been set. If a user clicks on a spot that has not been mapped, this default URL page appears.
4. Click the Rectangle button under Selection Type.
5. Depress your cursor on the parts of the image you wish to select. Hold down the cursor and draw a rectangle to select a hot spot.
6. Enter the URL in the Location field (e.g., http://www.aol.com/) for the first map selection.
7. Click the Add button. Don't be afraid if you make mapping mistakes at first. Mappings that have been added can be removed by choosing the Remove button. Try the map again.
8. Repeat the above steps for each URL you wish to be mapped. When done, choose the OK button.

The image map you have just created has a fine blue line surrounding it, which indicates that the image is a link-possibly an image map, but it could also link to a normal page. Click on the hot spots you have just created and the hot spot's page appears. Click on the MiniWeb for this page and you can see the icons that designate images maps.

Help Contents